<template>
    <el-select filterable :filter-method="selectmethod" @visible-change="visiblechange" v-model="data[dataname]"
        @change="changedata" :placeholder="name" style="width: 100%">
        <el-scrollbar ref="scrollbar" height="250px" @scroll="handleScroll">
            <el-option v-for="item in selectList" :key="item.league_id" :label="item.league_name"
                :value="item.league_id" />
            <div v-if="showloading" class="loading_in">加载中...</div>
        </el-scrollbar>
    </el-select>
</template>

<script setup>
import { http } from '@/utils/f-http'
const props = defineProps({
    name: String,
    url: String,
    data: Object,
    dataname: String,
})
const formdata = ref({
    page: 1,
    page_size: 20,
    league_name: '',
    total: 0,
    vaguevalue: ''
})
const emits = defineEmits()
const scrollbar = ref(null)
const selectList = ref([])
const showloading = ref(false)

const getleagueoption = () => {
    let url = `${props.url}?page=${formdata.value.page}&page_size=${formdata.value.page_size}&league_name=${formdata.value.league_name}`
    http
        .get(url)
        .then(res => {
            selectList.value = res.data.list
            formdata.value.total = res.data.total
        })
        .finally(() => { })
}

const visiblechange = (value) => {
    formdata.value.vaguevalue = ''
}

const selectmethod = value => {
    formdata.value.vaguevalue = value
    let url = `${props.url}?page=${formdata.value.page}&page_size=${formdata.value.page_size}&league_name=${formdata.value.vaguevalue}`
    http
        .get(url)
        .then(res => {
            selectList.value = res.data.list
            formdata.value.total = res.data.total
        })
        .finally(() => { })
}

const handleScroll = event => {
    let clientHeight = scrollbar.value.wrapRef.children[0].clientHeight
    let scrollTop = event.scrollTop
    if (scrollTop + 250 == clientHeight && formdata.value.total != selectList.length && !showloading.value) {
        showloading.value = true
        let url = ''
        formdata.value.page += 1
        if (formdata.value.vaguevalue == '') {
            url = `${props.url}?page=${formdata.value.page}&page_size=${formdata.value.page_size}&league_name=${formdata.value.league_name}`
        } else {
            url = `${props.url}?page=${formdata.value.page}&page_size=${formdata.value.page_size}&league_name=${formdata.value.vaguevalue}`
        }
        http.get(url).then(res => {
            selectList.value = [...selectList.value, ...res.data.list]
            formdata.value.total = res.data.total
            showloading.value = false
        })
            .finally(() => { })
    }
}

const changedata = (value) => {
    let a = {}
    selectList.value.forEach(item => {
        if (item.league_id == value) {
            a = item
        }
    });
    emits("changelazyselect",a)
}

onMounted(() => {
    getleagueoption()
})
</script>

<style lang="scss" scoped>
.loading_in {
    width: 100%;
    display: flex;
    justify-content: center;

    font-size: 14px;
    color: #b5b5b5;
}
</style>